<template>
    <div class="param-form">
        <el-form ref="form" :model="param" label-width="80px">

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>参数名称</template>
                        <el-input v-model="param.paramName" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>参数类型</template>
                        <el-select v-model="param.isSystem" class="condition-input" style="width:500px">
                            <el-option v-for="item in isSystemItem" :key="item.value" :label="item.label" :value="item.value" :disabled="param.id!=''"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>参数键</template>
                            <el-input v-model="param.paramKey" :disabled="param.id!=''" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red">*</span>参数值</template>
                        <el-input v-model="param.paramValue" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item>
                        <template slot="label"><span style="color: red"></span>排序</template>
                        <el-input v-model="param.sort" maxlength="64" style="width:500px"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <el-form-item label="参数描述:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="param.paramDetail" style="width:90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <el-form-item label="备注:">
                        <el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" v-model="param.remarks" style="width:90%"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>


            <div class="bottom-btn">
                <span slot="footer" class="dialog-footer">
                        <el-button @click="editDataBoxClose">取 消</el-button>
                        <el-button @click="clearDate">清 空</el-button>
                        <el-button type="primary" @click="onEditSubData">保 存 数 据</el-button>
                </span>
            </div>



        </el-form>
        
    </div>
</template>

<script>
    import paramApi from '@/api/param/paramApi'
    export default {
        name: "ParamForm",
        data(){
            return{
                param:{
                    id:'',
                    paramName:'',
                    paramKey:'',
                    paramValue:'',
                    paramDetail:'',
                    isSystem:'',
                    sort:'',
                    remarks:'',
                },
                isSystemItem:[{value:"1",label:"系统参数"},{value:"2",label:"普通参数"}],
            }
        },
        methods:{
            editDataBoxClose(){
                this.$emit('editDataBoxClose',false)
            },
            async onEditSubData(){
                let res = '';
                if (this.param.id != ''){
                    res = await paramApi.updateParam(this.param)
                    if (res.code == '200'){
                        this.$emit('onUpdateSuccess',res.data)
                    }else {
                        this.$message.error(res.msg)
                    }
                }else {
                    res = await paramApi.saveParam(this.param)
                    if (res.code == '200'){
                        this.$emit('onAddSuccess',res.data)
                    }else {
                        this.$message.error(res.msg)
                    }
                }

            },
            clearDate(){
                let param={
                    paramName:'',
                    paramKey:'',
                    paramValue:'',
                    paramDetail:'',
                    isSystem:'',
                    sort:'',
                    remarks:'',
                }
                this.param = param
            },
        },
        props:{
            editItemData:{
                require:true
            }
        },
        watch:{
            editItemData:{
                immediate: true,
                handler(newVal,oldVal){
                    if (newVal!=''){
                        this.param = newVal
                    }
                }
            }
        }
    }
</script>

<style scoped>

</style>